import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../../global/extension/int_extension.dart';
import '../../../common/models/common_meal_model.dart';
import '../../../global/uiconfig/size_fit.dart';
import '../../../../generated/l10n.dart';

class YSHMealDetailPageContent extends StatelessWidget {
  final YSHCommonMealModel _mealModel;
  YSHMealDetailPageContent(this._mealModel, {Key? key}) : super(key: key);

  final RefreshController _refreshController =
  RefreshController(initialRefresh: false);

  void _onRefresh() async{
    // monitor network fetch
    await Future.delayed(const Duration(milliseconds: 1000));
    // if failed,use refreshFailed()
    _refreshController.refreshCompleted();
  }

  @override
  Widget build(BuildContext context) {
    return SmartRefresher(
      enablePullDown: true,
      header: const ClassicHeader(),
      controller: _refreshController,
      onRefresh: _onRefresh,
      child: SingleChildScrollView(
        child: Column(
          children: [
            _setupBannerImage(),
            _setupMakeTitle(context, S.of(context).mealDetailPageContentTitle_1),
            _setupMakeMaterial(),
            _setupMakeTitle(context, S.of(context).mealDetailPageContentTitle_2),
            _setupMakeSteps(),
            SizedBox(height: 16.px)
          ],
        ),
      ),
    );
  }

  // 1.横幅图片
  Widget _setupBannerImage() {
    return SizedBox(
        width: double.infinity,
        child: Image.network(_mealModel.imageUrl ?? '')
    );
  }

  // 2.标题
  Widget _setupMakeTitle(BuildContext context, String title) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.px),
      child: Text(title,
          style: Theme.of(context)
              .textTheme
              .headlineSmall
              ?.copyWith(fontWeight: FontWeight.bold)),
    );
  }

  // 3.制作材料
  Widget _setupMakeMaterial() {
    return _setupMakeContent(
        child: ListView.builder(
            itemCount: _mealModel.ingredients?.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (ctx, index) {
              return Card(
                color: Colors.orange,
                child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 3.px, horizontal: 5.px),
                    child: Text(_mealModel.ingredients![index])),
              );
            }
        )
    );
  }

  // 4.制作步骤
  Widget _setupMakeSteps() {
    return _setupMakeContent(
        child: ListView.separated(
            itemCount: _mealModel.steps != null ? _mealModel.steps!.length : 0,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (ctx, index) {
              return ListTile(
                leading: CircleAvatar(
                  child: Text('#${index + 1}'),
                ),
                title: Text(_mealModel.steps![index]),
              );
            },
            separatorBuilder: (ctx, index){
              return const Divider();
            }
        )
    );
  }

  // 公共方法（内容边框包裹）
  Widget _setupMakeContent({Widget? child}) {
    return Container(
      padding: EdgeInsets.all(8.px),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
              color: Colors.grey
          ),
          borderRadius: BorderRadius.circular(8.px)
      ),
      width: YSHSizeFit.screenWidth - 30.px,
      child: child,
    );
  }
}
